<!-- MyUserWatcherComponent.vue -->
<template>
  <div>
    <div>
      <label for="name">
        Name:
        <input v-model="user.name" type="text" placeholder="Enter your name" id="name" />
      </label>
    </div>
    <div>
      <label for="age">
        Age:
        <input v-model="user.age" type="text" placeholder="Enter your age" id="name" />
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type User = {
  name: String;
  age: number;
}

const user = reactive<User>({
  name: "John",
  age: 30,
})

import { watch } from 'vue'

// watch(user, (newValue, oldValue) => {
//   console.log('user changed from: ', oldValue, ' to: ', newValue)
// })

// watch(
//   ()=> user.name,
//   (newValue, oldValue) => {
//     console.log('user.name changed from: ', oldValue, ' to: ', newValue)
//   }
// )

// watch(
//   () => user.name,
//   (newValue, oldValue) => {
//     console.log(
//       'user.name changed from: ',
//       oldValue,
//       ' to: ',
//       newValue
//     )
//   },
//   { immediate: true}
// )

watch(
  [() => user.name, () => user.age],
  ([newName, newAge], [oldName, oldAge]) => {
    console.log(
      'user changed from: ',
      { name: oldName, age: oldAge },
      ' to: ',
      { name: newName, age: newAge },
    )
  }
)

</script>
